<script setup lang="ts">
import { ref } from 'vue'

interface TechItem {
  name: string
  desc: string
  path: string
}

// 技术栈列表 - 清理后的数据
const techList = ref<TechItem[]>([
  {
    name: 'SCSS',
    desc: '成熟强大的 CSS 预处理器，\n提供高级功能。',
    path: '/pageExamples/pages/scss/scss',
  },
  {
    name: 'UnoCSS',
    desc: '即时原子化 CSS 引擎，\n开发效率极高。',
    path: '/pageExamples/pages/unocss/unocss',
  },
  {
    name: 'Wot Design Uni',
    desc: '简洁轻量的组件库，\n助力快速搭建。',
    path: '/pageExamples/pages/wot-design-uni/wot-design-uni',
  },
  {
    name: 'Pinia',
    desc: 'Vue 官方状态管理库，\nAPI 设计简洁直观。',
    path: '/pageExamples/pages/pinia/pinia',
  },
  {
    name: 'luch-request',
    desc: '基于 luch-request 封装的\nHTTP 请求工具。',
    path: '/pageExamples/pages/luch-request/luch-request',
  },
  {
    name: 'Lodash-es',
    desc: '模块化实用工具函数，\n按需引入减小体积。',
    path: '/pageExamples/pages/lodash-es/lodash-es',
  },
  {
    name: 'Day.js',
    desc: '极简日期时间库，\n解析、操作、显示。',
    path: '/pageExamples/pages/dayjs/dayjs',
  },
])

// 跳转到技术栈示例页面
const navToTechPage = (path: string) => {
  uni.navigateTo({
    url: path,
  })
}

// 移除辅助函数
</script>

<template>
  <!-- 页面容器: 应用光晕效果和内边距 -->
  <view
    class="min-h-screen pb-safe bg-black text-[#e5e5e5] page-container-with-glow examples-page-cards pt-[var(--status-bar-height)]"
  >
    <!-- 卡片网格容器: 确保在光晕效果之上 -->
    <view class="grid grid-cols-2 gap-4 p-4 tech-card-grid">
      <!-- 技术卡片项 -->
      <view
        v-for="tech in techList"
        :key="tech.name"
        class="flex flex-col items-center justify-center p-4 rounded-xl bg-[#1f1f1f] shadow-lg text-center cursor-pointer aspect-square border border-white/10 tech-card"
        hover-class="scale-105 border-white/20 shadow-xl bg-[#2a2a2a]"
        @click="navToTechPage(tech.path)"
      >
        <!-- 卡片内容 -->
        <text
          class="block mb-1 text-base font-medium text-white overflow-hidden text-ellipsis whitespace-nowrap w-full card-title"
        >
          {{ tech.name }}
        </text>
        <text class="block text-sm text-gray-300 w-full card-description">
          {{ tech.desc }}
        </text>
      </view>
    </view>

    <!-- 底部填充 -->
    <view class="h-4" />
  </view>
</template>

<style lang="scss">
// 背景光晕效果
.page-container-with-glow {
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    top: -300rpx;
    left: -300rpx;
    width: 1000rpx;
    height: 1000rpx;
    background: radial-gradient(circle, rgba(0, 220, 255, 0.1) 0%, transparent 70%);
    filter: blur(120rpx);
    z-index: 0;
    pointer-events: none;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: -400rpx;
    right: -400rpx;
    width: 1200rpx;
    height: 1200rpx;
    background: radial-gradient(circle, rgba(255, 42, 109, 0.08) 0%, transparent 70%);
    filter: blur(140rpx);
    z-index: 0;
    pointer-events: none;
  }
}

.examples-page-cards {
  .tech-card-grid {
    // 确保网格在背景光晕之上
    position: relative;
    z-index: 1;

    .tech-card {
      // 基础卡片样式由 UnoCSS 类设置 (bg, padding, border, etc.)
      box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.3);
      transition:
        transform 0.2s ease-out,
        box-shadow 0.2s ease-out,
        border-color 0.2s ease-out,
        background-color 0.2s ease-out;

      .card-description {
        /* text-gray-300 等由 UnoCSS 处理 */
        line-height: 1.5;
      }
    }
  }
}
</style>
